前言

主要是講 fetch、axios，有補充一點點的node.js中的寫法~

fetch

使用 fetch 大都另外載入，使用它時不需要額外引入外部資源。

發送請求

url：你要打的那支 api，是必要的參數唷。

post用的參數：內含head、body.…。

取得回傳值

.then()

fetch 後方會接 .then()，這是 Promise 的特性，也是一種鏈接的方式，讓資料取得後可在 then 裡面接收。

要讓 res 傳到下一個 .then()，就要用 return res 這樣的方式來寫 。

因為 res 可能會需要是 json格式，所以經常寫成 return res.json();

.catch()

用來捕捉錯誤訊息。

寫法

fetch(url, post用的參數)
.then(res => {
	return res.json()
})
.then(data => {
	// data 就等於 res.json()
	console.log(data)
	......
})
.catch(err => console.log(err))

axios

Vue 官方網站有 axios 在 vue 中的使用方法，看來 vue 也建議使用 axios 發送 api 請求。

用 axios 會需要先引入。需要先安裝 axios 後， import axios from 'axios’；或是直接引入CDN <script src="https://unpkg.com/axios/dist/axios.min.js"></script>。

發送請求

請求方式一樣分成 get 和 post。

get 請求，有兩種寫法

axios.get('url')
axios.get('url', 非必要的其他參數)

post 請求

axios.post('url',{
    參數1: '...',
    參數2: '...'
})

取得回傳值

axios會把資料自動轉換格式，因此不用像 fetch 一樣，還要寫 .json()；axios 的回傳值可以直接拿來使用。

axios 也是有分成功/失敗的結果的promise狀態，所以也可以用.then()或是.catch()來處理 。

### 取得回傳值

axios會把資料自動轉換格式，因此不用像 fetch 一樣，還要寫 `.json()`；axios 的回傳值可以直接拿來使用。

axios 也是有分成功/失敗的結果的promise狀態，所以也可以用.then()或是.catch()來處理 。

以get為例

與api請求相關，常看到的參數(可能比內文還長的補充)

我稍微碰過 node.js，當初是前端新手第一次碰，常常看不懂，因此想藉機想出來。雖然跟本系列文章不太相關，但我想這些名字也算是常見，可以介紹一下，給基礎知識沒那麼熟練的朋友一點簡單說明。

以下是在 node.js 中發送api時，會遇到的幾個名稱：

get方法，回傳結果的取法

• param：
  路徑 + “/” + value，網址後面的參數會是/…/…，可以有很多傳入。
• qry：
  路徑 + “?” + key=value，網址後面的參數會是?…=..…，通常是一個傳入。

post方法，回傳結果的取法

• body：
  如果是 post，送出時就需要設置 Headers & Body 才能正確地取得資料。

放在參數位置的名稱

req

• request，從前端發出去的請求。

res

• result，傳回來的結果(從後端傳出)。

函式執行的終點，會執行 res.json、res.end、res.send、res.redirect，所以在函式的最後，一定要寫出一個res….，否則無論成功或錯誤，程式會一直等直到timeout，都還等不到一個結果。

// 最後要傳回 returnData 時的 接住結果否則就接住錯誤 的寫法
if(err != null){
	res.json(returnData);
	res.status(500).send(err.message);
}else{
	res.send("ok");
}  

結語

今日的 fetch 和 axios 用法其實都很好上手，只是有些地方例如 fetch 的 .json() 會需要比較注意，要是不知道，可能會卡很久都沒頭緒QQ。

今天就到這，如有說明不周或錯誤的地方，還請多留言討論(鞠躬)。

參考

fetch
https://www.casper.tw/javascript/2017/12/28/javascript-fetch/
https://developer.mozilla.org/zh-TW/docs/Web/API/Fetch_API/Using_Fetch
axios
https://v2.cn.vuejs.org/v2/cookbook/using-axios-to-consume-apis.html